<template>
  <div class="dailyChannelStatistics">
    <h3>每日渠道统计</h3>
    <div class="allTotal" v-if="permissions_obj.id_122||permissions_obj.id_all">
      <span>渠道数量：{{channelData.channel_count}}</span>
      <span>渠道注册用户总数：{{channelData.channel_user_count}}</span>
      <span>渠道充值用户总数：{{channelData.channel_pay_count}}</span>
      <span>渠道充值金额：{{channelData.channel_user_pay}}</span>
    </div>
    <div class="tagList tagList2">
      <ul>
        <li
          v-for="(item,index) in channelTagList"
          :key="index"
          :class="[channelActiveIndex==index?'active':'']"
          @click="channelSearchTag(item,index)"
        >{{item}}</li>
      </ul>
    </div>
    <div class="searchBox">
      <div class="tagList">
        <ul>
          <li
            v-for="(item,index) in tagList"
            :key="index"
            :class="[activeIndex==index?'active':'']"
            @click="searchTag(item,index)"
          >{{item}}</li>
        </ul>
      </div>
      <div class="search">
        <div class="cond2 cond">
          <label>日期</label>
          <el-date-picker
            v-model="search1"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
        <div>
          <el-button type="primary" icon="el-icon-search" @click="searchMethod">搜索</el-button>
        </div>
      </div>
    </div>
    <div id="channelReg"></div>
    <div id="channelRechargeNum"></div>
    <div id="channelRechargeAmount"></div>
  </div>
</template>
<script>
export default {
  name: "dailyChannelStatistics",
  data() {
    return {
      channelTagList: [],
      channelActiveIndex: 0,
      channelActiveText: "",
      tagList: ["近30日", "近90日"],
      activeIndex: 0,
      activeText: 30,
      search1: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      initData: {},
      channelData: {},
      // 权限管理
       permissions:[],
      permissions_obj:{},
    };
  },
  created(){ 
    //权限判断
    this.permissions = this.$store.state.permissions;
    let oneOff=false;
    this.permissions.forEach((item, index) => {
      if(item==-1){
        oneOff=true;
      }else{
        this.permissions_obj['id_'+item]=item;
      }
    });
    if(oneOff){
      this.permissions_obj.id_all=true;
    }else{
      this.permissions_obj.id_all=false;
    };
  },
  mounted() {
    this.getChannelList();
  },
  methods: {
    channelSearchTag(item, index) {
      this.channelActiveIndex = index;
      this.channelActiveText = item;
      this.getInitData();
    },
    //日期搜索标签
    searchTag(item, index) {
      this.activeIndex = index;
      if (index == 0) {
        this.activeText = 30;
      } else if (index == 1) {
        this.activeText = 90;
      }
      this.getInitData();
    },
    searchMethod() {
      this.getInitData();
    },
    //获取渠道统计计数
    async getChannelList() {
      let parames = {
        handshake: "",
        data: {}
      };
      let res = await this.$axios.post(
        this.$api.channelCount,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.channelData = res.data;
        this.channelTagList = this.channelData.channel_list;
        this.channelActiveText = this.channelTagList[0];
        this.getInitData();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //获取初始化数据
    async getInitData() {
      let parames = {
        handshake: "",
        data: {
          last_day: this.activeText,
          start_date: this.search1&&this.search1.length > 0 ? this.search1[0] : "",
          end_date: this.search1&&this.search1.length > 1 ? this.search1[1] : "",
          channel: this.channelActiveText
        }
      };
      let res = await this.$axios.post(
        this.$api.statisticsChannel,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.initData = res.data;
        this.creatChannelReg();
        this.creatChannelRechargeNum();
        this.creatChannelRechargeAmount();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
     //渠道注册
    creatChannelReg() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("channelReg"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "渠道注册  更新时间：" + this.initData.update
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["渠道注册"]
        },
        xAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true
          },
          data: this.initData.date
        },
        yAxis: {
          type: "value",
          axisTick: {
            alignWithLabel: true
          },
          // data: this.initData.price
        },
        series: [
          {
            name: "渠道注册",
            data: this.initData.reg,
            type: "line",
            smooth: true
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
   //渠道充值人数
    creatChannelRechargeNum() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("channelRechargeNum"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "渠道充值人数  更新时间：" + this.initData.update
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["渠道充值人数",]
        },
        xAxis: {
          type: "category",
           axisTick: {
            alignWithLabel: true
          },
          data: this.initData.date
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "渠道充值人数",
            data: this.initData.count,
            type: "line",
            smooth: true
          },
          
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    //渠道充值金额
     creatChannelRechargeAmount() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("channelRechargeAmount"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "渠道充值金额  更新时间：" + this.initData.update
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["渠道充值金额"]
        },
        xAxis: {
          type: "category",
           axisTick: {
            alignWithLabel: true
          },
          data: this.initData.date
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "渠道充值金额",
            data: this.initData.price,
            type: "line",
            smooth: true
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  }
};
</script>
<style scoped>
h3 {
  padding: 0.2rem;
  color: #3c763d;
}
.search {
  display: flex;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
.search label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.tagList {
  width: 1.4rem;
}
.tagList ul {
  display: flex;
  align-items: center;
  width: 100%;
}
.tagList li {
  background: rgb(26, 153, 226);
  color: #fff;
  cursor: pointer;
  height: 0.4rem;
  width: 0.7rem;
  text-align: center;
  line-height: 0.4rem;
  margin-bottom:.1rem;
}
.tagList li:hover {
  background: rgb(52, 169, 236);
}
.tagList .active {
  background: rgb(52, 169, 236);
}
.searchBox {
  display: flex;
  justify-content: flex-start;
  padding-left: 0.2rem;
}
.tagList2 {
  width: 100%;
  padding: 0 0.2rem;
  margin-bottom: 0.2rem;
}
.tagList2 ul {
  flex-wrap: wrap;
}
.tagList2 li {
  border-radius: 3px;
  margin-right: 0.1rem;
  height: 0.3rem;
  line-height: 0.3rem;
  width: auto;
  padding: 0px 10px;
  display: flex;
  background: rgb(26, 213, 226);
}
.tagList2 li:hover {
  background: rgb(25, 168, 179);
}
.tagList2 .active {
  background: rgb(25, 168, 179);
}
.allTotal {
  margin-bottom: 0.2rem;
  padding: 0 0.2rem;
}
.allTotal span {
  margin-right: 0.2rem;
}
#channelReg {
  margin-top: 0.2rem;
  width: 100%;
  height: 3rem;
}
#channelRechargeNum {
  margin-top: 0.2rem;
  width: 100%;
  height: 3rem;
}
#channelRechargeAmount {
  margin-top: 0.2rem;
  width: 100%;
  height: 3rem;
}
</style>